<template>
  <div class="container" style="padding: 18px">
    <div style="padding-bottom: 18px">
      <span>路线名称： </span>
      <el-input
        v-model="select.name"
        placeholder="请输入路线名称"
        style="width: 150px"
      ></el-input>
      <span style="width: 80px; display: inline-block; margin-left: 20px"
        >排序方式：
      </span>
      <el-select
        v-model="OrderType"
        placeholder="请选择"
        style="width: 120px"
      >
        <el-option
          v-for="item in OrderList"
          :key="item.WORKTYPE"
          :value="item.value"
          :label="item.WORKTYPE"
        >
        </el-option>
      </el-select>
      <el-button
        size="mini"
        type="primary"
        @click="getlistdata"
        style="margin-left: 15px"
        >查 询</el-button
      >
      <el-button
        size="mini"
        style="margin-left: 15px"
        @click="showPlanRoadWorkNoFillInfoPB"
        :type="formMissing.type"
        >{{ formMissing.title }}</el-button
      >
      <span style="width: 110px; display: inline-block; margin-left: 40px"
        >路线总数 {{ info.lineAll }}
      </span>
      <span style="width: 160px; display: inline-block"
        >{{ select.worktype }}早班路线数 {{ info.line1 }}
      </span>
      <span style="width: 160px; display: inline-block"
        >{{ select.worktype }}中班路线数 {{ info.line2 }}
      </span>
      <span style="width: 160px; display: inline-block"
        >{{ select.worktype }}晚班路线数 {{ info.line3 }}
      </span>
    </div>
    
    <!-- <div class="monitoring">
      <el-form ref="select" :model="select" label-width="80px">
        <el-form-item label="标段" style="width: 200px; display: inline-block">
          <el-select v-model="select.lotInfo.LID" placeholder="请选择标段">
            <el-option
              v-for="(item, index) in select.lotList"
              :value="item.LID"
              :label="item.LNAME"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="作业类型"
          style="width: 200px; margin-left: 40px; display: inline-block"
        >
          <el-select v-model="select.workType" placeholder="请选择作业类型">
            <el-option
              v-for="(item, index) in select.workTypeList"
              :value="item.WORKTYPE"
              :label="item.WORKTYPE"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路线名称：" style="display: inline-block">
          <el-input
            v-model="select.name"
            placeholder="请输入路线名称"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item style="display: inline-block">
          <el-button size="mini" type="primary" @click="screeningData"
            >查 询</el-button
          >
        </el-form-item>
      </el-form>
    </div> -->
    <el-table
      border
      highlight-current-row
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <el-table-column
        prop="LINENAME"
        label="路线名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="SNAME"
        label="班次"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WORKTYPE"
        label="作业类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="PARENT_NAME"
        label="所属组织机构"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >定位</el-button
          > -->
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import eventBus from '@/eventBus.js'
// import { filter } from 'vue/types/umd'
export default {
  data () {

    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      tableData: [],
      formMissing: {
        show: false,
        data: [],
        type: 'info',
        title: '无遗漏'
      },
      noFillData: [],
      select: {
        name: '',
        lotInfo: '',
        lotName: '',
        lotClientNo: '',
        workType: '',
        lotList: [],
        workTypeList: [],
      },
      info: {
        lineAll: '',
        line1: '',
        line2: '',
        line3: '',
      },
      OrderType: '1',
      OrderList:[{"WORKTYPE":"创建时间", "value":"1"},{"WORKTYPE":"班次", "value":"2"}]
    }
  },
  created () {

    eventBus.$on("roadLine_reTableData", (lotClientNo, worktype) => {
      this.select.worktype = worktype
      this.select.lotClientNo = lotClientNo
      this.getlistdata()
      this.getPlanRoadWorkNoFillInfoPB()
    });
  },
  mounted () {
  },
  methods: {
    async getPlanRoadWorkNoFillInfoPB () {
      var url = 'Vehicle/GetPlanRoadWorkNoFillInfoPB?LOTID=' + this.select.lotClientNo + '&WORKTYPE=' + this.select.worktype
      const { data } = await this.$Http.get(url)
      this.formMissing.data = data
      
      if (data.length === 0) {
        this.formMissing.title = '无遗漏'
        this.formMissing.type = 'info'
      } else {
        this.formMissing.title = '查看遗漏'
        this.formMissing.type = 'primary'
      }
    },
    showPlanRoadWorkNoFillInfoPB () {
      // if (this.formMissing.data.length) {
        eventBus.$emit('roadLine_showNoFill', this.formMissing.data)
      // }
    },
    //获取工地列表
    async getlistdata () {
      var url = 'Vehicle/GetLineInfoPB?LINENAME=&WORKTYPE=' + this.select.worktype + '&ClientNO=' + this.select.lotClientNo+ '&ORDERTYPE=' + this.OrderType
      const { data } = await this.$Http.get(url)
      this.originalData = data;
      this.info.lineAll = data.length
      this.info.line1 = 0
      this.info.line2 = 0
      this.info.line3 = 0
      data.forEach(element => {
        if (element.SNAME.includes('早班')) {
          this.info.line1++
        }
        if (element.SNAME.includes('中班')) {
          this.info.line2++
        }
        if (element.SNAME.includes('晚班')) {
          this.info.line3++
        }
      });
      eventBus.$emit('roadLine_reRoadState')
      this.screeningData()
    },
    // 模糊查询
    screeningData () {
      this.currentPage = 1;
      this.tableData = this.originalData.filter(item => item.LINENAME.includes(this.select.name))
    },
    handleEdit (index, row) {
      eventBus.$emit('roadLine_handleEdit', row)
    },
    // 删除标段信息
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        var url = 'Vehicle/DeleteLineInfoPB?LineId=' + row.LINEID
        const { data } = await this.$Http.get(url)
        if (data.IsSucess) {
          this.$message.success('删除成功')
          // 
          this.getlistdata()
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
      }
    },
    // 双击表格某一行
    dblClickRow (row) {
      console.log(row)
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getlistdata();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },

  }
}
</script>
<style>
.container {
  overflow-y: auto;
  height: calc(100% - 50px);
  border: 0px;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>